<template>
	<div class="recruitment-board">
		<div v-if="loading" class="home-empty">
			<el-icon class="loading-icon"><Loading /></el-icon>
			<div class="empty-text">加载中...</div>
		</div>

		<div v-else-if="recruitments.length === 0" class="home-empty">
			<el-icon class="empty-icon"><Briefcase /></el-icon>
			<div class="empty-text">暂无招聘公告</div>
			<div class="empty-desc">暂时没有新的招聘信息</div>
		</div>

		<div v-else class="recruitment-list">
			<div v-for="recruitment in recruitments" :key="recruitment.ID" class="recruitment-item" @click="handleRecruitmentClick(recruitment)">
				<!-- 与通知公告一致的样式 -->
				<div class="recruitment-main">
					<!-- 左侧内容 -->
					<div class="recruitment-content">
						<!-- 标题和状态 -->
						<div class="title-row">
							<h4 class="recruitment-title">
								{{ recruitment.Title }}
								<span v-if="recruitment.JobPosition?.Name" class="job-position">- {{ recruitment.JobPosition.Name }}</span>
							</h4>
							<div class="recruitment-badges">
								<span v-if="recruitment.IsExternalPublish" class="priority-badge">对外</span>
								<span v-if="isUrgent(recruitment)" class="urgent-badge">急招</span>
							</div>
						</div>

						<!-- 简化的元信息 -->
						<div class="recruitment-meta">
							<span class="publish-time">
								{{ formatTime(recruitment.PublishStartDate || recruitment.CreateTime) }}
							</span>
							<span class="hire-count">{{ recruitment.HireNumber }}人</span>
							<span v-if="recruitment.SalaryRange" class="salary-info">{{ recruitment.SalaryRange }}</span>
							<span v-if="recruitment.EducationRequirement" class="education-info">{{ recruitment.EducationRequirement }}</span>
							<span v-if="recruitment.PublishEndDate" class="deadline-info">截止{{ formatDate(recruitment.PublishEndDate) }}</span>
						</div>
					</div>

					<!-- 右侧箭头 -->
					<div class="recruitment-arrow">
						<el-icon><ArrowRight /></el-icon>
					</div>
				</div>
			</div>
		</div>

		<!-- 详情弹窗 -->
		<RecruitmentDetail :row="detailRow" v-model:visible="detailVisible" />
	</div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
import { Loading, Briefcase, User, Phone, Calendar, Clock, ArrowRight } from '@element-plus/icons-vue';
import { SysHrRecruitPublishRequestBillApi } from '/@/views/hr/syshrrecruitpublishrequestbill/api';
import RecruitmentDetail from './RecruitmentDetail.vue';
import { formatPast, formatDate as _formatDate } from '/@/utils/formatTime';
import { auth } from '/@/utils/authFunction';

/**
 * 组件属性定义
 */
interface Props {
	/** 最大显示数量，默认10 */
	maxCount?: number;
	/** 是否只显示对外发布的职位 */
	externalOnly?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
	maxCount: 100,
	externalOnly: false,
});

const emit = defineEmits(['recruitment-count']);

// 状态变量
const loading = ref(false);
const recruitments = ref<any[]>([]);
const detailVisible = ref(false);
const detailRow = ref<any | null>(null);

// API实例
const api = SysHrRecruitPublishRequestBillApi();

// 计算属性

/**
 * 判断是否为紧急招聘
 */
function isUrgent(recruitment: any): boolean {
	if (!recruitment.PublishEndDate) return false;

	const endDate = new Date(recruitment.PublishEndDate);
	const now = new Date();
	const daysLeft = Math.ceil((endDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));

	return daysLeft <= 7; // 7天内截止的为急招
}

/**
 * 格式化时间显示
 */
function formatTime(dateStr: string): string {
	if (!dateStr) return '';
	return formatPast(dateStr, 'YYYY-mm-dd');
}

/**
 * 格式化日期显示
 */
function formatDate(dateStr: string | Date | null): string {
	if (!dateStr) return '';
	const date = typeof dateStr === 'string' ? new Date(dateStr) : dateStr;
	return _formatDate(date, 'YYYY-mm-dd');
}

/**
 * 处理招聘项点击事件
 */
function handleRecruitmentClick(recruitment: any) {
	detailRow.value = recruitment;
	detailVisible.value = true;
}

/**
 * 加载招聘数据
 */
async function loadRecruitments() {
	try {
		loading.value = true;

		// 构建查询参数 - 只查询已发布和已完成的招聘信息
		const searchParams = {
			Page: 1,
			Limit: props.maxCount,
			SortInfo: null,
			Title: null,
			Description: null,
			// 工作流状态筛选：只查询已发布(已完成)的招聘信息
			WorkflowStatus: '已完成',
			// 如果只显示对外发布的职位
			IsExternalPublish: props.externalOnly ? true : null,
			// 确保发布日期有效
			PublishStartDate: null,
			PublishEndDate: null,
		};

		const res = await api.search(searchParams);

		const data = (res as any).Data || [];

		// 过滤有效的招聘信息
		let filteredData = data.filter((item: any) => {
			// 确保是已发布状态
			const isPublished = item.WorkflowStatus === '已完成';
			// 确保有标题
			const hasTitle = item.Title && item.Title.trim();
			// 如果设置了对外发布过滤
			const externalCheck = !props.externalOnly || item.IsExternalPublish;

			return isPublished && hasTitle && externalCheck;
		});

		// 按发布时间倒序排序
		filteredData = filteredData.sort((a: any, b: any) => {
			const dateA = new Date(a.PublishStartDate || a.CreateTime).getTime();
			const dateB = new Date(b.PublishStartDate || b.CreateTime).getTime();
			return dateB - dateA;
		});

		// 限制显示数量
		recruitments.value = filteredData.slice(0, props.maxCount);

		// 发送招聘数量
		emit('recruitment-count', recruitments.value.length);
	} catch (error) {
		console.error('加载招聘数据失败:', error);
		recruitments.value = [];
		emit('recruitment-count', 0);
	} finally {
		loading.value = false;
	}
}

/**
 * 获取工作流状态对应的数值
 */
function getWorkflowStatusValue(status: string): number {
	const statusMap: Record<string, number> = {
		待提交: 0,
		提交中: 1,
		审核中: 2,
		已完成: 3,
		已取消: 4,
		待处理: 5,
		处理中: 6,
		已处理: 7,
	};
	return statusMap[status] ?? 3; // 默认为已完成
}

// 监听属性变化，重新加载数据
watch(
	[() => props.maxCount, () => props.externalOnly],
	() => {
		loadRecruitments();
	},
	{ deep: true }
);

// 组件挂载时加载数据
onMounted(() => {
	loadRecruitments();
});
</script>

<style scoped>
/* 招聘公告板样式 - 与通知公告一致 */
.recruitment-board {
	height: 100%;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* 空状态样式 */
.home-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--home-spacing-xl);
	color: var(--home-text-placeholder);
	flex: 1;
	min-height: 200px;
}

.loading-icon,
.empty-icon {
	font-size: 48px;
	margin-bottom: var(--home-spacing-md);
	opacity: 0.6;
}

.loading-icon {
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.empty-text {
	font-size: 16px;
	font-weight: 500;
	margin-bottom: var(--home-spacing-xs);
}

.empty-desc {
	font-size: 14px;
	opacity: 0.7;
}

/* 招聘列表样式 - 与通知公告完全一致 */
.recruitment-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #e1e5e9 transparent;
	padding: 0;
}

/* 滚动条样式 - 与通知公告完全一致 */
.recruitment-list::-webkit-scrollbar {
	width: 4px;
}

.recruitment-list::-webkit-scrollbar-track {
	background: transparent;
}

.recruitment-list::-webkit-scrollbar-thumb {
	background: #e1e5e9;
	border-radius: 2px;
}

.recruitment-list::-webkit-scrollbar-thumb:hover {
	background: #c1c7cd;
}

/* 招聘项样式 - 与通知公告一致 */
.recruitment-item {
	background: #ffffff;
	border: 1px solid #f0f2f5;
	border-radius: 8px;
	padding: 16px;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	min-height: 72px;
}

.recruitment-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(135deg, var(--home-primary), var(--home-primary-light));
	transform: scaleY(0);
	transition: transform 0.3s ease;
	border-radius: 0 2px 2px 0;
}

.recruitment-item:hover {
	border-color: #409eff;
	background: #fafbfc;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
}

.recruitment-item:hover::before {
	transform: scaleY(1);
}

.recruitment-item:hover .recruitment-arrow {
	transform: translateX(4px);
	color: #409eff;
}

.recruitment-item:active {
	transform: translateY(0);
}

/* 主要布局 */
.recruitment-main {
	display: flex;
	align-items: center;
	gap: 16px;
}

.recruitment-content {
	flex: 1;
	min-width: 0;
}

/* 标题行 */
.title-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 8px;
	gap: 12px;
}

.recruitment-title {
	font-size: 15px;
	font-weight: 600;
	color: #1f2937;
	margin: 0;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

.job-position {
	color: var(--home-text-regular);
	font-weight: 400;
	opacity: 0.8;
}

/* 徽章样式 */
.recruitment-badges {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
	align-items: flex-start;
}

.priority-badge {
	background: linear-gradient(135deg, #409eff, #66b1ff);
	color: white;
	padding: 3px 8px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	letter-spacing: 0.3px;
	box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}

.urgent-badge {
	background: linear-gradient(135deg, #e6a23c, #f0a020);
	color: white;
	padding: 3px 8px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	letter-spacing: 0.3px;
	box-shadow: 0 2px 4px rgba(230, 162, 60, 0.3);
}

/* 元信息样式 */
.recruitment-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 13px;
}

.publish-time {
	color: #6b7280;
	font-weight: 500;
}

.hire-count {
	color: #409eff;
	background: #e7f3ff;
	padding: 2px 8px;
	border-radius: 10px;
	font-weight: 500;
	border: 1px solid transparent;
	transition: all 0.2s ease;
	border-color: #409eff40;
}

.salary-info {
	color: #67c23a;
	background: #f0f9ff;
	padding: 2px 8px;
	border-radius: 10px;
	font-weight: 500;
	border: 1px solid transparent;
	transition: all 0.2s ease;
	border-color: #67c23a40;
}

.education-info {
	color: #909399;
	background: #f5f7fa;
	padding: 2px 8px;
	border-radius: 10px;
	font-weight: 500;
	border: 1px solid transparent;
	transition: all 0.2s ease;
	border-color: #90939940;
}

.deadline-info {
	color: #e6a23c;
	background: #fdf6ec;
	padding: 2px 8px;
	border-radius: 10px;
	font-weight: 500;
	border: 1px solid transparent;
	transition: all 0.2s ease;
	border-color: #e6a23c40;
}

/* 右侧箭头 */
.recruitment-arrow {
	color: #d1d5db;
	font-size: 16px;
	transition: all 0.2s ease;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #f9fafb;
}

/* 🎨 深色模式适配 */
@media (prefers-color-scheme: dark) {
	.recruitment-item {
		background: #1f2937;
		border-color: #374151;
	}

	.recruitment-item:hover {
		background: #111827;
		border-color: #409eff;
	}

	.recruitment-title {
		color: #f9fafb;
	}

	.recruitment-meta {
		color: #9ca3af;
	}

	.recruitment-arrow {
		background: #374151;
		color: #6b7280;
	}

	.home-empty .empty-text {
		color: #f3f4f6;
	}
}

/* 🎯 无障碍支持 */
@media (prefers-reduced-motion: reduce) {
	.recruitment-item,
	.recruitment-arrow {
		transition: none;
	}
}

/* 📱 响应式设计 */
@media (max-width: 768px) {
	.recruitment-item {
		padding: 12px;
	}

	.recruitment-main {
		gap: 12px;
	}

	.title-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.recruitment-badges {
		align-self: flex-end;
	}

	.recruitment-meta {
		gap: 8px;
		font-size: 12px;
	}

	.recruitment-arrow {
		width: 28px;
		height: 28px;
	}
}

@media (max-width: 480px) {
	.recruitment-item {
		padding: 10px;
	}

	.recruitment-title {
		font-size: 14px;
	}

	.recruitment-meta {
		gap: 6px;
		font-size: 11px;
	}

	.priority-badge,
	.urgent-badge {
		font-size: 10px;
		padding: 2px 6px;
	}

	.hire-count,
	.salary-info,
	.education-info,
	.deadline-info {
		font-size: 10px;
		padding: 1px 6px;
	}

	.recruitment-arrow {
		width: 24px;
		height: 24px;
	}

	.recruitment-list {
		gap: 6px;
	}
}
</style>
